<template>
  <div :class="{ left: true, animationStart: animationShow.animationStartShow, animationEnd: animationShow.animationEndShow }"><!--  -->
    <img
      @mousewheel.prevent
      v-if="leftOpenOrCloseShow.leftOpenOrClose"
      @click="openOrClose"
      class="openOrClose"
      src="@/assets/screenShowImg/左边展开收起按钮.png"
      alt=""
    />
    <img
      @mousewheel.prevent
      v-else
      class="openOrClose"
      @click="openOrClose"
      src="@/assets/screenShowImg/左边展开收起按钮.png"
      alt=""
    />
    <div class="devState">
      <div class="title">
        <img src="@/assets/screenShowImg/标题组件背景.png" />
        <div>
          <img src="@/assets/screenShowImg/icons-标题.png" />
          <p>数量监控</p>
        </div>
      </div>
      <ul>
        <li>
          <div>
            <img src="@/assets/screenShowImg/回路控制器.png" alt="" />
            <p>
              品类<br />
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>数量</span>
              </p>
              <p>{{ statsData.categoryTotal }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>新增</span>
              </p>
              <p>0</p>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="@/assets/screenShowImg/传感器.png" alt="" />
            <p>
              产品<br />
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>数量</span>
              </p>
              <p>{{ statsData.productTotal }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>新增</span>
              </p>
              <p>0</p>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="@/assets/screenShowImg/集中控制器.png" alt="" />
            <p>
              设备<br />
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>数量</span>
              </p>
              <p>{{ statsData.deviceTotal }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>新增</span>
              </p>
              <p>0</p>
            </div>
          </div>
        </li>
      </ul>
      <!-- <el-empty description="暂无数据" v-else /> -->
    </div>
    <div class="devFault">
      <div class="title">
        <img src="@/assets/screenShowImg/标题组件背景.png" />
        <div>
          <img src="@/assets/screenShowImg/icons-标题.png" />
          <p>设备故障告警</p>
        </div>
      </div>
      <div v-show="devFaultList.length > 0" class="devFaultList">
        <div class="th">
          <p>级别</p>
          <p>故障信息</p>
          <p>发生时间</p>
        </div>
        <div v-for="item in devFaultList" :key="item.id">
          <p
            :style="{
              backgroundColor: item.type == '致命' ? '#ff6961' : item.type == '严重' ? '#ffb340' : '#409cff',
            }"
          >
            {{ item.type == '致命' ? '致命' : item.type == '严重' ? '严重' : '告警' }}
          </p>
          <p :title="item.info">{{ item.info }}</p>
          <p>{{ item.time }}</p>
        </div>
      </div>
      <!-- <el-empty v-show="devFaultList.length == 0" description="暂无数据" /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { stats } from '@/api/index'

const animationShow = reactive({
  animationStartShow: true,
  animationEndShow: false,
})
const devFaultList = ref([
  {
      "id": "1888014881991462919",
      "type": "致命",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "告警",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过1天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "严重",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过3天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462921",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149F 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462922",
      "type": "致命",
      "info": "坪山工厂前台1单灯000013B3 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462923",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149E 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "致命",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "告警",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过1天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "严重",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过3天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462921",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149F 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462922",
      "type": "致命",
      "info": "坪山工厂前台1单灯000013B3 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462923",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149E 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "致命",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "告警",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过1天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462919",
      "type": "严重",
      "info": "坪山工厂办公室1单灯000013A9 设备离线超过3天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462921",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149F 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462922",
      "type": "致命",
      "info": "坪山工厂前台1单灯000013B3 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  },
  {
      "id": "1888014881991462923",
      "type": "致命",
      "info": "坪山工厂前台1单灯0000149E 设备离线超过30天",
      "time": "2025-02-15 08:00:00"
  }
])
const leftOpenOrCloseShow = reactive({
  leftOpenOrClose: true,
})
const statsData = ref({
  categoryTotal: 0,
  productTotal: 0,
  deviceTotal: 0,
  reportTotal: 0,
  onlineTotal: 0,
  offlineTotal: 0,
  neverOnlineTotal: 0,
  deviceStatsOfCategory: [],
  reportDataStats: []
})
onMounted(() => {
  stats().then((res) => {
    statsData.value = res.data
    console.log(statsData)
  })
  
  setTimeout(() => {
    animationShow.animationEndShow = true
  }, 100)
  setTimeout(() => {
    animationShow.animationStartShow = false
    animationShow.animationEndShow = false
  }, 2500)
})

const openOrClose = (e) => {
  if (leftOpenOrCloseShow.leftOpenOrClose) {
    e.target.parentNode.classList.add('leftOpenOrClose')
    leftOpenOrCloseShow.leftOpenOrClose = false
  } else {
    e.target.parentNode.classList.remove('leftOpenOrClose')
    leftOpenOrCloseShow.leftOpenOrClose = true
  }
}
</script>

<style lang="scss" scoped>
.left {
  display: flex;
  flex-direction: column;
  width: 23.22916%;
  min-width: 410px;
  transition: 0.4s all;
  position: relative;
  z-index: 10;
  padding: 1%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  > img {
    height: 100%;
  }
  > .openOrClose {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
  }
  > div.devState {
    width: 100%;
    flex: 1;
    height: 46%;
    display: flex;
    flex-direction: column;
    div.title {
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
        > img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p:nth-of-type(1) {
          font-size: 18px;
          font-weight: 600;
          text-indent: 25px;
        }
      }
    }
    ul {
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      padding: 0;
      margin: 0;
      li {
        width: 100%;
        display: flex;
        margin: 6% 0;
        line-height: 21px;
        > div:nth-of-type(1) {
          width: 40%;
          display: flex;
          align-items: center;
          img {
            width: 37.6%;
          }
          p {
            font-size: 18px;
            margin: 0 0 0 6.5%;
            span {
              font-size: 16;
              // color: #c1ebeb;
            }
          }
        }
        > div:nth-of-type(2) {
          width: 59%;
          display: flex;
          background: url('@/assets/screenShowImg/设备状态列表背板.png') no-repeat;
          background-size: 100%;
          > img {
            width: 100%;
          }
          > div {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            > p:nth-of-type(1) {
              font-size: 14px;
              width: 50%;
              margin: 0 0 2px 0;
              img {
                margin-right: 8.8%;
              }
            }
            > p:nth-of-type(2) {
              font-size: 18px;
              margin: 0;
            }
          }
          > div:nth-of-type(2) {
            > p:nth-of-type(2) {
              color: #ffd044;
              margin: 0;
            }
          }
        }
      }
    }
  }
  > div.devFault {
    width: 100%;
    height: 54%;
    display: flex;
    flex-direction: column;
    div.title {
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
        > img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p:nth-of-type(1) {
          font-size: 18px;
          font-weight: 600;
          text-indent: 25px;
        }
      }
    }
    > div.devFaultList {
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      margin-bottom: 15px;
      > div {
        display: flex;
        height: 28px;
        align-items: center;
        padding-left: 4px;
        > p {
          height: 18px;
          font-family: 'Source Han Sans CN';
          letter-spacing: 0.066px;
          font-size: 14px;
          margin-right: 4px;
          overflow: hidden;
          line-height: 18px;
          text-align: center;
        }
        > p:nth-of-type(1) {
          width: 10%;
          border-radius: 4px;
        }
        > p:nth-of-type(2) {
          width: 67%;
          text-align: left;
        }
        > p:nth-of-type(3) {
          width: 23%;
        }
      }
      > div:hover {
        background-color: #c4c4c41a;
      }
      > div.th:hover {
        background-color: transparent;
      }
      > div.th {
        > p {
          line-height: 18px;
          color: #8fd6d8;
          overflow: hidden;
          background-color: transparent;
        }
        > p:nth-of-type(1) {
          width: 10%;
        }
        > p:nth-of-type(2) {
          width: 67%;
        }
        > p:nth-of-type(3) {
          width: 23%;
        }
      }
    }
    .el-empty {
      margin: 0;
      padding: 0;
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      :deep(.el-empty-image) {
        height: 70px;
      }
    }
  }
}
.left.animationStart {
  transform: translateX(-100%);
  > .devState {
    transform: translateX(-33%);
  }
  > .devFault {
    transform: translateX(-66%);
  }
}
div.left.animationEnd {
  transition: 2.5s all;
  transform: translateX(0%);
  > .devState {
    transition: 2.5s all;
    transform: translateX(0%);
  }
  > .devFault {
    transition: 2.5s all;
    transform: translateX(0%);
  }
}
.leftOpenOrClose {
  transition: 0.4s all;
  transform: translateX(-100%);
}
</style>
  